'use client';
import 'bytemd/dist/index.css';
import 'highlight.js/styles/vs.css';
import './index.css';
import { Card } from 'antd';
import React from 'react';
import Title from 'antd/es/typography/Title';
import TagList from '@/components/TagList';
import MdViewer from '@/components/MdViewer';
import useAddUserSignIn from '@/hooks/useAddUserSignIn';

interface Props {
  question?: API.QuestionVo;
}

/**
 * 题目详情
 * @param props
 * @constructor
 */
const QuestionDetail = (props: Props) => {
  const { question } = props;

  useAddUserSignIn();

  return (
    <div className="question-detail">
      <Card>
        <Title level={1} style={{ fontSize: 24 }}>
          {question.title}
        </Title>
        <TagList tagList={question.tagList} />
        <div style={{ marginBottom: 16 }} />
        <MdViewer value={question.content} />
      </Card>
      <div style={{ marginBottom: 16 }} />
      <Card title="推荐答案">
        <MdViewer value={question.answer} />
      </Card>
    </div>
  );
};

export default QuestionDetail;
